<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '身份管理',
  },
}
</route>

<template>
  <!-- 导航栏 -->
  <customHeader title="身份管理"></customHeader>

  <!-- 身份管理 -->
  <view class="identity bg-pageBg color-base position-relative flex-1 px-32rpx">
    <!-- 身份推广员 -->
    <view class="identity_border">
      <!-- 信息区域 -->
      <view class="flex items-center">
        <image
          class="w-42rpx h-42rpx block mr-8rpx"
          :src="staticUrl('/static/identity/icon002.png')"
        ></image>
        <view class="font-size-32rpx font-bold">推广员</view>
      </view>
      <view class="color-tip mb-28rpx mt-10rpx">随时查看管道收益，见证每一份付出的价值</view>

      <!-- 操作区域 -->
      <view class="identity_cz flex justify-end items-center">
        <image
          class="w-34rpx h-34rpx block mr-6rpx"
          :src="staticUrl('/static/identity/operate001.png')"
        ></image>
        <view class="font-bold">身份注销</view>
      </view>
    </view>

    <!-- 身份代理商 -->
    <view class="identity_border">
      <!-- 信息区域 -->
      <view class="flex items-center">
        <image
          class="w-42rpx h-42rpx block mr-8rpx"
          :src="staticUrl('/static/identity/icon003.png')"
        ></image>
        <view class="font-size-32rpx font-bold">代理商</view>
      </view>
      <view class="color-tip mb-28rpx mt-10rpx">实时查看区域收益，掌控财富动向</view>

      <!-- 操作区域 -->
      <view class="identity_cz flex justify-end items-center">
        <image
          class="w-34rpx h-34rpx block mr-6rpx"
          :src="staticUrl('/static/identity/operate003.png')"
        ></image>
        <view class="font-bold">终止代理</view>
        <image
          class="w-34rpx h-34rpx block mr-6rpx ml-26rpx"
          :src="staticUrl('/static/identity/operate002.png')"
        ></image>
        <view
          class="font-bold"
          @click="
            () => {
              routerTo({ path: '/pages/user/identity/kamil/index' })
            }
          "
        >
          卡密管理
        </view>
      </view>
    </view>

    <!-- 身份商家 -->
    <view class="identity_border">
      <!-- 信息区域 -->
      <view class="flex items-center">
        <image
          class="w-42rpx h-42rpx block mr-8rpx"
          :src="staticUrl('/static/identity/icon004.png')"
        ></image>
        <view class="font-size-32rpx font-bold">商家</view>
      </view>
      <view class="color-tip mb-28rpx mt-10rpx">查看店铺收益，掌控发展成果</view>
    </view>

    <!-- 身份骑手 -->
    <view class="identity_border">
      <!-- 信息区域 -->
      <view class="flex items-center">
        <image
          class="w-42rpx h-42rpx block mr-8rpx"
          :src="staticUrl('/static/identity/icon005.png')"
        ></image>
        <view class="font-size-32rpx font-bold">骑手</view>
      </view>
      <view class="color-tip mb-28rpx mt-10rpx">日夜兼程，用行动书写着配送的高效与责任</view>
    </view>
  </view>

  <!-- 缺省页 -->
  <customExpect
    v-if="state.identityData.length === 0"
    style="flex: 1"
    :title="'您还没有身份认证'"
    :icon="'/static/default/comingShop.png'"
  ></customExpect>
</template>

<script setup>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
  reactive,
  toRefs,
} from 'vue'

// reactive声明响应式数据，用于声明引用数据类型
const state = reactive({
  identityData: [
    {
      titile: '王弱弱',
      number: '15608087544',
      msg: '四川省成都市成华区万年场街道双店路111号 蓝光公园悦庭',
      default: true,
    },
    {
      titile: '王弱弱',
      number: '15608087544',
      msg: '四川省成都市成华区万年场街道双店路111号 蓝光公园悦庭',
      default: false,
    },
    {
      titile: '王弱弱',
      number: '15608087544',
      msg: '四川省成都市成华区万年场街道双店路111号 蓝光公园悦庭',
      default: false,
    },
    {
      titile: '王弱弱',
      number: '15608087544',
      msg: '四川省成都市成华区万年场街道双店路111号 蓝光公园悦庭',
      default: false,
    },
    {
      titile: '王弱弱',
      number: '15608087544',
      msg: '四川省成都市成华区万年场街道双店路111号 蓝光公园悦庭',
      default: false,
    },
    {
      titile: '王弱弱',
      number: '15608087544',
      msg: '四川省成都市成华区万年场街道双店路111号 蓝光公园悦庭',
      default: false,
    },
    {
      titile: '王弱弱',
      number: '15608087544',
      msg: '四川省成都市成华区万年场街道双店路111号 蓝光公园悦庭',
      default: false,
    },
  ],
})

// onMounted
onMounted(() => {
  console.log('onMounted')
})

// 跳转新增地址
const toAddLocation = (query) => {
  uni.navigateTo({
    url: `addLocation?query=${JSON.stringify(query)}`,
  })
}

// 设置默认地址
const toChangeActive = (data) => {
  state.identityData.forEach((value) => {
    value.default = false
  })
  data.default = true
}
</script>

<style lang="scss">
.identity {
  .identity_border {
    box-sizing: border-box;
    width: 694rpx;
    padding: 32rpx;
    padding-bottom: 4rpx;
    margin-top: 20rpx;
    font-size: 28rpx;
    font-weight: 400;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .identity_cz {
      padding-top: 28rpx;
      padding-bottom: 26rpx;
      color: #3fb674;
      border-top: 1px solid #f7f7f7;
    }
  }
}
</style>
